<template>
  <section class="data-dashboard">
    <div class="section-header">
      <h2>数据概览</h2>
      <button v-if="showRefresh" class="refresh-btn" @click="refresh">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
          <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
        </svg>
        刷新
      </button>
    </div>
    <div class="dashboard-grid">
      <div 
        class="dashboard-card" 
        v-for="stat in stats" 
        :key="stat.id"
        @click="handleClick(stat)"
      >
        <div class="stat-icon" :style="{ color: stat.color }">
          {{ stat.icon }}
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stat.value }}</span>
          <span class="stat-label">{{ stat.label }}</span>
        </div>
        <div 
          class="stat-trend" 
          :class="stat.trend > 0 ? 'up' : 'down'" 
          v-if="stat.trend !== undefined && stat.trend !== 0"
        >
          {{ stat.trend > 0 ? '↑' : '↓' }} {{ Math.abs(stat.trend) }}%
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  showRefresh: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['refresh', 'click'])

// 统计数据（TODO: 需要从API获取）
const stats = ref([
  { id: 'online', icon: '📡', label: '在线测站', value: '1,258', color: '#3b82f6', trend: 2.5, route: '/pages/stations/online' },
  { id: 'water', icon: '💧', label: '今日水位', value: '856', color: '#10b981', trend: -1.2, route: '/pages/water/today' },
  { id: 'rain', icon: '🌧️', label: '降雨站点', value: '342', color: '#f59e0b', trend: 5.8, route: '/pages/rain/active' },
  { id: 'warning', icon: '⚡', label: '预警数量', value: '12', color: '#ef4444', trend: 0, route: '/pages/warning/list' },
])

// 加载数据（TODO: 实现API调用）
async function loadStats() {
  // TODO: 调用API获取实时统计数据
  // const data = await getStatsFromAPI()
  // stats.value = data
}

function refresh() {
  loadStats()
  emit('refresh')
}

function handleClick(stat) {
  emit('click', stat)
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.data-dashboard {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.refresh-btn:hover {
  color: #00d4ff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dashboard-card {
  position: relative;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.dashboard-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 32px;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #f1f5f9;
}

.stat-label {
  font-size: 13px;
  color: #94a3b8;
}

.stat-trend {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

.stat-trend.up {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.stat-trend.down {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .dashboard-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 20px;
  }
}
</style>

